<template>
	<view>
		<view class="boxconet">

			<u-search placeholder="请输入呢称或者是ID" v-model="keyword" @change='getUserChange'></u-search>
			<view class="title_msg">用户</view>
			<u-swipe-action :index="index" v-for="(item, index) in listData" :key='index'>
				<view class="item u-border-bottom"  @click="clickIndex(item)">
					<image mode="aspectFill" :src="item.img" />
					<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
					<view class="title-wrap">
						<text class="title u-line-2">{{ item.nickname  }}({{item.usermali}})</text>
					</view>
					<view class="time">
						加好友
					</view>
				</view>
			</u-swipe-action>

			<!-- <view class="title_msg">群组</view>
			<u-swipe-action :index="index" v-for="(item, index) in list" :key="item.id" @click="click" @open="open">
				<view class="item u-border-bottom">
					<image mode="aspectFill" :src="item.images" /> -->
					<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
					<!-- <view class="title-wrap">
						<text class="title u-line-2">{{ item.title }}</text>
					</view>
					<view class="add_time">
						加群
					</view>
				</view>
			</u-swipe-action> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				list: [{
						id: 1,
						title: '长安回望绣成堆，山顶千第开开',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
					},
					{
						id: 2,
						title: '新丰绿树起黄埃，数骑渔阳探',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
					},
					{
						id: 3,
						title: '登临送目，天气初',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
					}
				],
				listData:[],
			}
		},
		methods: {
			clickIndex(data){
				console.log(data);
				uni.navigateTo({
					url: `./informationAdd?data=${encodeURIComponent(JSON.stringify(data))}`,
				});
			},
			async getUserChange(data) {
			let list = await this.http(this.api.getUserVagueList,{vague:data})
				console.log(list);
				this.listData = list
			},
			throttle(fn, gapTime) {
				if (gapTime == null || gapTime == undefined) {
					gapTime = 1500
				}

				let _lastTime = null

				// 返回新的函数
				return function() {
					let _nowTime = +new Date()
					if (_nowTime - _lastTime > gapTime || !_lastTime) {
						fn.apply(this, arguments) //将this和参数传给原函数
						_lastTime = _nowTime
					}
				}
			}
			}
		}
</script>

<style scoped lang="less">
	@import '../../../../../static/css/common.less';

	.title_msg {
		font-family: PingFangSC-Semibold;
		font-size: 22px;
		color: #272832;
		letter-spacing: -0.75px;
		margin-left: 20rpx;
	}

	.item {
		display: flex;
		padding: 20rpx;
	}

	.add_time {
		background: rgba(74, 170, 255, 0.10);
		border-radius: 12px;
		border-radius: 12px;
		color: #4AAAFF;
		width: 20%;
		height: 50rpx;
		.centered();
	}

	image {
		width: 80rpx;
		flex: 0 0 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}

	.title {
		text-align: left;
		font-size: 28rpx;
	}

	.title-wrap {
		display: flex;
		align-items: center;
		justify-content: left;
		width: 60%;
	}

	.time {
		background: #FFE431;
		border-radius: 12rpx;
		width: 20%;
		height: 50rpx;
		.centered();
	}
</style>
